// 请求获取表单数据渲染到页面
let layer =layui.layer
let form=layui.form
getArticleCate()
function getArticleCate (){
    axios.get('/my/article/cates').then(({data:{data}})=>{
        let htmlStr =data.map((item)=>{
            return`
          <tr>
            <td>${item.name}</td>
            <td>${item.alias}</td>
            <td>
              <button type="button" class="layui-btn layui-btn-xs btn_edit" data-id='${item.Id}'>编辑</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-danger btn_delete" data-id='${item.Id}'>删除</button>
            </td>
          </tr>
          `
        }).join('')
        $('#tbody').html(htmlStr)
    })
    
}
// 封装添加类别弹出框
let addFromStr = `
<form  id="addForm" class="layui-form">
<!-- 第一行 分类名称 -->
<div class="layui-form-item">
  <label class="layui-form-label">分类名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
      class="layui-input">
  </div>
</div>
<!-- 第二行 分类别名  -->
<div class="layui-form-item">
  <label class="layui-form-label">分类别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
      class="layui-input">
  </div>
</div>
<!-- 第三行 按钮 -->
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
</div>
</form>`

// 封装编辑按钮弹出框
let editFormStr= `
<form  id="editForm" class="layui-form" lay-filter='editForm'>
    <div class="layui-form-item layui-hide">
    <label class="layui-form-label">分类名称ID</label>
    <div class="layui-input-block">
        <input type="text" name="Id" required lay-verify="required" placeholder="请输入Id" autocomplete="off"
        class="layui-input">
    </div>
    </div>

<!-- 第一行 分类名称 -->
<div class="layui-form-item">
  <label class="layui-form-label">分类名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
      class="layui-input">
  </div>
</div>
<!-- 第二行 分类别名  -->
<div class="layui-form-item">
  <label class="layui-form-label">分类别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
      class="layui-input">
  </div>
</div>
<!-- 第三行 按钮 -->
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
  </div>
</div>
</form>`

// 添加文章类别
let indexAddForm;
$('#btnAddCate').on('click',function(){
 indexAddForm = layer.open({
        content: addFromStr,
        type: 1,
        title: '添加文章类别',
        area: ['500px','250px']
      });
})
$('body').on('submit','#addForm',function(e){
    e.preventDefault()
    // 获取表单填写数据
    let data =$(this).serialize()
    axios.post('/my/article/addcates',data).then(({data:{status,message}})=>{
        if(status !==0){
            return layer.msg(message)
        }
        // 关闭添加类别按钮
        layer.close(indexAddForm)
        // 渲染获取数据
        getArticleCate()
        layer.msg(message)
    })
})
// 编辑按钮
$('#tbody').on('click','.btn_edit',function(){
    const Id=$(this).attr('data-id')
    axios.get('/my/article/cates/'+Id).then(({data:res})=>{
        form.val('editForm',res.data)
    })
    // 编辑弹出框
    indexEditForm = layer.open({

           content: editFormStr,
           type: 1,
           title: '修改文章类别',
           area: ['500px','250px']
         });
   })
   
  //  编辑更新数据
   $('body').on('submit','#editForm',function(e){
        e.preventDefault()
        let data=$(this).serialize()
        axios.post('/my/article/updatecate',data).then(({data:{status,message}})=>{
            if(status !==0){
                return layer.msg(message)
            }
            // 关闭编辑弹出框
            layer.close(indexEditForm)
            // 重新获取数据
            getArticleCate()
            // 提示
            layer.msg(message)
        })

   })

//    删除按钮
$('#tbody').on('click','.btn_delete',function(){
  // 获取元素自定义的属性
  let Id=$(this).attr('data-id')
    axios.get('/my/article/deletecate/'+ Id).then(({data:{status,message}})=>{
        if(status !==0){
            return layer.msg(message)
        }
        layer.msg(message)
        getArticleCate()
    })
})
